iT邦幫忙

2022 iThome 鐵人賽

1
Modern Web

「你知道這是什麼嗎?」小白也能輕鬆瞭解的 Vue3 單元測試!Feat. Vitest + Vue Test Utils系列 第 35

【雜談ノ章】那些沒說到的內容、完賽感言、TOC 與參考資料們

  • 分享至 

  • xImage
  •  

本系列文已重新編排並新增內容出版成冊,若您喜歡透過書籍來閱讀的話,歡迎至天瓏書局下單選購唷!

ShawnL - Vue.js 3前端測試入門從這裡開始

https://ithelp.ithome.com.tw/upload/images/20230923/20119062k3l6NcInZf.jpg


那些沒說到的部分

在開賽時,起初寫了個預期的 TOC 來規劃要講哪些內容,然而隨著每天撰文下來,覺得有部分內容比較偏向額外的學習,因此在評估後,決定調整原先 TOC 的內容,定義一下我認為至少先學到哪個部分就已足夠開始在實際專案中應用,而這一段落主要是來小談一下這些異動的章節有哪些,以及為什麼會有這些異動與將來是否會再陸續補充。

  • 訪問實際導入測試的團隊心路歷程:會想擷取其他團隊經驗最主要是擔心導入後的成效問題,但訪問到不少人大部分都是支持充分研究後先寫再來調整,剩下都是怎麼把它運作得更好的後談,後來筆者自己想想學習與導入其實也不衝突,但有些內容真的要試過了才知道,因此想把這部分挪到後續有空時再來補充。

  • 測試驅動開發(Test-Driven Development, TDD):TDD 本身是個值得深入討論的主題,只用一篇短文提及其實有些可惜,但要深入又會模糊了學習測試的焦點,因此後來想想乾脆透過測驗章節中的 Demo 環節稍微展現一下 TDD 精神下的紅燈綠燈要如何開發,若讀者有興趣了自然會對 TDD 感到好奇,這一部分賽後應該會考慮與下方的重構一起討論。

  • 測試與重構(Refactor with Testing):在重構的領域中,其實還能夠再細分為針對測試程式碼的重構與產品程式碼的重構,而測試程式碼的重構主要是基於具有更高的可讀性與可維護性,甚至提升測試程式碼的執行效率等等,這其實很仰賴大量的實作後才能有所體會,而本系列文定位希望是以入門測試為主,所以同樣保留至賽後再來考慮;至於產品程式碼的重構,則已經偏向了 Vue 中的最佳實踐等等議題,雖說測試程式碼與產品程式碼是相生的概念,但這部分建議以測試作為保護的方向去調整產品程式碼即可,後續主要還是會以測試程式碼中的內容為主。

  • 漏網之魚:原先是要談談測試中失敗的議題,但同樣這部分需要大量實作才會比較有感,而前面的變異測試(Mutation Testing)也是降低漏網之魚的手段之一,因此先有變異測試的概念我覺得剩下就是在慢慢補足案例已經,重新與團隊思考測試案例路徑的規劃即可。


完賽感言

屏除了上述部分,這邊首先要恭喜的是一起閱讀本系列文的讀者,對於基本的測試概念來說你們也完賽了!你可能會訝異於感覺還有不少東西沒提及,但是其餘的東西都是從基本的概念延伸而來的。就像開發產品程式碼一樣,我們也需要透過實際的測試經驗來慢慢磨練我們的測試技巧,並從中體會更多的心得與不斷精進測試相關的內容。

再來也要恭喜我自己(?),今年參賽其實也是挺突然的,一直到了開賽最後一天才打算來發文 XD,最主要的原因是有些部分希望能準備得更充分一點,但這種東西其實也沒有準備完的一天⋯⋯,因為測試程式碼的工具也不斷在進步,剩下的東西只能靠時間來驗證了。所以最後乾脆一不做二不休,直接給他報名下去,雖然報名後每天都在懷疑人生,好幾天寫到晚上十一點差點超時,不然就是一寫完直接累癱睡爆的那種,可是,我撐過來惹!!!感謝賽期間女友的支持與家中貓貓們的陪伴,另外也感謝同事把我鐵人賽當作在追番一樣閱讀,給了我不少回饋與靈感。

最後想要一起恭喜其他鐵人們,不論完賽與否,我覺得有繁中文件可以閱讀是一件很幸福的事情,更別提如果是追最新技術的鐵人們,在國內文獻上的參考很少的情況下還能夠寫出很多優質的文章,真的非常不簡單。由其每當我沒靈感時我都會邊看看其他鐵人寫了什麼 XD 時常一不注意差點忘記自己也在參賽,現在終於能好好來拜讀了!


TOC

寫完文章要列 TOC 簡單多了(?)

此 TOC 是透過 JavaScript 語法直接在鐵人賽目錄 頁面上 Console 取得系列文目錄標題與連結,歡迎各位鐵人自行取用下列語法。(迷:等一下,大家應該都寫完 TOC 了吧!!!!)

const titleEl = document.querySelectorAll('.qa-list .qa-list__title')
const linkEl = document.querySelectorAll('.qa-list .qa-list__title a')
const tocList = ['\n']

titleEl.forEach((el, idx) => tocList.push(`- [${el.innerText}](${linkEl[idx].href})\n`)) // 直接產出 Markdown 格式
console.log(tocList.join('')) // 顯示於 Console 控制台中自行複製即可

測試案例⋯⋯ (誒

test('it should return markdown list', () => {
    // ... 不知道為什麼寫完當下連這個都想測試一下
})

產出結果:


參考資料

不想看我的系列文也沒關係(嗚),但這些文章你絕對不能錯過。

文章

環境設置

測試金字塔

單元測試

測試斷言庫

測試替身

覆蓋率

TDD

突變測試

最佳實踐

書籍

Facebook 追蹤

相關工具

-- 希望將來還有機會與各位鐵人一起共襄盛舉!--


上一篇
【進階ノ章】寫測試的最佳實踐(Testing Best Practice)
系列文
「你知道這是什麼嗎?」小白也能輕鬆瞭解的 Vue3 單元測試!Feat. Vitest + Vue Test Utils35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
綿羊
iT邦新手 4 級 ‧ 2022-10-21 09:11:30

恭喜完賽~ 脫離果凍果腹的日子 (

ShawnL iT邦新手 1 級 ‧ 2022-10-21 09:53:58 檢舉

一度以為自己要變成甲蟲了mmm...

0
鱈魚
iT邦研究生 5 級 ‧ 2022-10-21 23:06:24

恭喜完賽!

ShawnL iT邦新手 1 級 ‧ 2022-10-23 21:07:24 檢舉

謝謝!!!企鵝超人!!!!

0

恭喜新的里程碑!這系列讚讚

ShawnL iT邦新手 1 級 ‧ 2022-11-01 14:52:55 檢舉

果凍吃到差點變成另一種 (?)

我要留言

立即登入留言